<template>
	<view class="">
		<view class="product" v-for="(item,index) in productList">
			<view class="list" v-for="(items,key) in item">
				<view class="remove" @tap="todelet(index,key)">
					<image src="../../static/image/mine/discount/remove.png" mode=""></image>
				</view>
				<view class="pic">
					<image src="../../static/image/mine/discount/product01.png" mode=""></image>
				</view>
				<view class="info">
					<view class="info_tilte">
						临潼石榴老树新鲜包邮应季天水果3-10斤
					</view>
					<view class="desc">
						品质保障 美味新鲜
					</view>
					<view class="price">
						<text class="price_now">￥129.00</text>
						<text class="price_line">￥199.00</text>
					</view>
					<view class="add_delet">
					<!-- 	<view class="delet" @tap="todelet(index,key)">
							<i class="icon">&#xe64c;</i>
						</view> -->
						<view class="add">
							<i class="icon" @tap="deletnum(index,key)">&#xe606;</i>
							<text class="num">{{items.num}}</text>
							<i @tap="addnum(index,key)" class="icon">&#xe600;</i>
						</view>
					</view>
					<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:['productList'],
		data () {
			return {
			
			}
		},
		methods: {
			change (index, key) {
				// console.log(index,key);
				this.$emit('deletpro',{'index':index,'key':key})
			},
			todelet (index,key) {
				// console.log(index,key);
				this.$emit('deletpro',{'index':index,'key':key})
				// this.productList[index].splice(key,1)
			},
			deletnum (index,key) {
				this.$emit('deletnum',{'index':index,'key':key} )
			
			},
			addnum (index,key) {
				// this.productList[index][key].num++
				this.$emit('addnum',{'index':index,'key':key} )
			}
		}
	}
</script>

<style lang="less" scoped>
	.product {
		width: calc(100% - 30upx);
		margin: auto;
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		margin-top: 15upx;
	}
	.list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pic {
			width: 160upx;
			height: 160upx;
			// margin-right: 10upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.remove {
			width: 50upx;
			height: 50upx;
			// margin-right: 30upx;
			// margin-right: 10upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			width: 450upx;
			position: relative;
			padding: 30upx 0;
			box-sizing: border-box;
			border-bottom: 2upx solid #E1E1E1;
			.info_tilte {
				font-size: 28upx;
				color: #333333;
				line-height: 40upx;
				height: 80upx;
			}
			.desc {
				font-size: 24upx;
				color: #999999;
				line-height: 32upx;
			}
			.price {
				margin-top: 10upx;
				.price_now {
					font-size: 28upx;
					color: #f73e2f;
					line-height: 40upx;
				}
				.price_line {
					font-size: 24upx;
					color: #999;
					line-height: 40upx;
				}
			}
			.add_delet {
				position: absolute;
				bottom: 20upx;
				right: 0;
				.delet {
					text-align: right;
					.icon {
						font-size: 28upx;
						color: #999999;
					}
				}
				.add {
					.icon {
						font-size: 28upx;
						color: #999999;
					}
					text {
						font-size: 28upx;
						margin: 0 10upx;
					}
				}
			}
		}
		
	}
	.list:last-child .info {
				border-bottom: none;
			}
</style>
